<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="public.css">
    <link rel="stylesheet" href="01-首页.css">
</head>

<body>
    <header>
        <div></div>
        <div class="search">
            <input type="text" placeholder="输入商家、商品名称">
        </div>
    </header>
    <div class="banner"></div>
    <main id="like">
        <h2>猜你喜欢</h2>
        <div id="lik">
            <div :class="{active: currentIndex == index }"  @click="handleClick(index)"  class="btn" v-for="(item,index) in list" :key="index">
                <div class="name">{{item}}</div>
            </div>
            <div id="type">
                <span  v-for="(item,index) in type">{{item}}</span>
            </div>
        </div>
        <div id="list">
            <div class="card" v-for="(item,index) in arr">
                <div class="imgbox">
                    <img :src="item.img">
                </div>
                <div class="inf">
                    <h3>{{item.title}}</h3>
                    <div class="num">
                        <span>4.3</span>
                        <span>月售{{item.num}}</span>
                    </div>
                    <div class="pic">
                        <span>起送￥{{item.price}}</span>
                        <span>远距离配送￥{{item.price2}}</span>
                        <span>{{item.time}}分钟</span>
                        <span>{{item.distance}}km</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer id="app">
            <div class="tabbar">
                <div  :class="{active: currentIndex == index }"  @click="handleClick(index)" class="btn" v-for="(item,index) in list">
                    <!-- <img src="" alt=""> -->
                    <div class="name">{{item.name}}</div>
                </div>
            </div>
    </footer>
    <script src="./vue-2.5.21.js"></script>
    <script src="./like.js"></script>
    <!-- <script src="./list.js"></script> -->
    <script src="./nav.js"></script>
</body>

</html>